<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<title>Demo gWidgets</title>
		<?php include 'head.php' ?>
	<style type="text/css">


#rules,#rules2,#rules3 { padding: 5px;}

#main{ margin: 10px; padding: 10px;}

#flickr {	overflow: auto;}

div.gtab div.gtab-active {
	border: none;
	width: 100%;
	padding: 10px;
}

div.gtab ul.gtab-controllers {
	width: 100%;
	height: 27px;
	border-bottom: 1px solid #ccc;
}

div.gtab ul.gtab-controllers li a {
	background-color: #fff;
}
div.gtab ul.gtab-controllers li a.gtab-active,div.gtab ul.gtab-controllers li a.gtab-active:hover  {
	background-color: #ccc;
}

div.gtab ul.gtab-controllers li a:hover{
	background-color: #eee;
	color: #000;
}

div.gtip-container { 
	border: 1px solid #ccc; /*555;*/
	background-color: #fff; /*fff;*/
	padding: 0px;
	margin: 0px;
	position: absolute;
	z-index: 100;
}
div.gtip-container span.gtip-arrow {
  position: absolute;
  top: -1px;
  width: 10px;
  height: 21px;
}
.gtip-arrow-left {
	background: url(images/gtip-arrow2-left.png) left top no-repeat;
}
.gtip-arrow-right {
	background: url(images/gtip-arrow2-right.png) right top no-repeat;
}

div.gtip-container div.gtip-title {
	background-color: #ccc; /*ddd;*/
	padding: 2px;
	margin: 0px;
	font-size: 0.7em;
	text-align: left;
	height: 17px;
}

div.gtip-container div.gtip-content,div.gtip-container div.gtip-content div,div.gtip-container div.gtip-content p { 
	padding: 2px;
	margin: 0px;
	font-size: 0.9em;
}

.gwidget-waiting {
	margin: 5px;
	padding: 10px;
	border: none;
	color: #aaa;
	background-color: #fff;
	width: 200px;
}

.gwidget-error {
	border: none;
	color: #f00;
	background-color: #fff;
	padding: 10px;
	margin: 5px;
}
#options,#media,#event,#tabmap,#tipdemo { clear:right; }
</style>

	<script src="js/scriptaculous/scriptaculous.js?load=effects" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var gWidget_Options = {toggleEffect: 'appear',
		msgClose:'fermer',
		msgWaiting:'Chargement en cours...',
		msgError:'Impossible de contacter le serveur. Essayez plus tard.',
		useRefresh: false,
		eventOn:'click',
		tipTitle: false};
	</script>
</head>
<body>
<?php include 'nav.php' ?>
<div id="container">
<a href="?gtip=maintip&amp;eventOn=mouseover#main" class="gexpander gtip" id="mainexpander" title="tooltip title">Are you looking for a demo of gWidgets? follow me please...</a>
<div id="maintip" style="display:none">Click here to see new demo...<br/>and actually you are looking at it!</div>
<div id="main" style="display:none;">
	<div id="tabs" class="gtab">
		<ul class="widget-tab-head">
			<li><a href="#options">Tab 1</a></li>
			<li><a href="#media">gBox</a></li>
			<li><a href="#event">Expand!</a></li>
			<li><a href="#tipdemo">Tips</a></li>
			<li><a href="sleep.php?content=lorem#tabmap">Tab 4</a></li>
		</ul>
		
		<div id="tipdemo">
			<p><a href="sleep.php?content=shortlorem&amp;width=450" class="gtip" title="my tooltip title">ajax tooltip on click</a> (width: 450px)</p>
			<p><a href="?width=280&amp;eventOn=mouseover#inlinetooltip" class="gtip">first inline tooltip</a> (width: 280px)</p>
			<p><input type="text" class="gtip" gtip="?width=300&amp;eventOff=blur#inlinetooltip2" title="tooltip on input" value="click me to see"/> (eventOn:click, eventOff: blur, width: 300px)</p>
		
			<div id="inlinetooltip" style="display:none;">this is my first tooltip without any title, the height should adjust automatically, if not, please call the emergency...</div>
			<div id="inlinetooltip2" style="display:none;">this is my second tooltip...</div>
		</div>
		
		<div id="options">
			<h3>Hey what's wrong?</h3>
			<p>Here is the specific configuration for this page</p>
			<pre class="command-line"><code>&lt;script type="text/javascript" charset="utf-8"&gt;
var gWidget_Options = {
	toggleEffect: 'appear',
	msgClose:'fermer',
	msgWaiting:'Chargement en cours...',
	msgError:'Impossible de contacter le serveur. Essayez plus tard.',
	useRefresh:false,
	eventOn: 'click',
	tipTitle: false};
&lt;/script&gt;</code></pre>

<p>Which means that gExpanders will have the 'appear' effect, and all messages are in french (plus some changes in the css for fun).</p>
			<p>You want to know more? <a href="http://www.estadieu.com/gwidgets/">Go the official gWidgets page</a></p>
		</div>

		<div id="media">
			hello here is an inline tab...
			<p><a href="?width=700&amp;height=450#assets" class="gbox" title="this is an inline content tab inside a modal window">Demo gBox inline, click me...</a></p>
			<p>Demo gBox ajax content:<a href="sleep.php?content=lorem" title="long text with overflow" class="gbox">long</a>, <a href="sleep.php?width=300&amp;height=100#macau"  title="short text" class="gbox">short</a> and <a href="sleep.php?content=404&amp;width=500&amp;height=500"  title="short errorvtext" class="gbox">404 error</a>, and one more for <a href="?test=11#mmm"  title="here we are supposed to see something..." class="gbox">testing error when no corresponding inline id</a></p>
			<p><a href="images/easttimor.jpg" class="gbox" title="East-Timor beach">East-Timor picture</a></p>

			<div>
			<a href="images/mp5.jpg" class="gbox" title="MP5 is here!"><img src="images/mp5.tn.jpg" alt="mp5"/></a>
			<a href="sleep.php?content=shortlorem" class="gbox" title="404 error page"><img src="images/easttimor.tn.jpg" alt="east timor"/></a>
			</div>
		</div>

		<div id="event">
			<a href="sleep.php?content=shortlorem#rules" class="gexpander">Ajax Expander</a>
			<div id="rules" style="display:none;"></div>
		<div style="height:20px;"></div>
			
			<a href="sleep.php?content=404#rules2" class="gexpander">Ajax Expander with error</a>
		
		<div style="height:20px;"></div>
		
			<a href="#rules3" class="gexpander">inline Expander</a>
			<div id="rules3" style="display:none;">
				container content rules
			</div>

		</div>
		
		<div id="tabmap"> </div>
</div></div>

	<div id="assets" class="gtab" style="display:none">
		<ul class="widget-tab-head">
			<li><a href="#mymedia">My Media</a></li>
			<li><a href="#upload">Upload</a></li>
			<li><a href="sleep.php?content=lorem#flickr">Flickr</a></li>
		</ul>
		<div id="mymedia">
			lorem ipsum...
		</div>
		<div id="upload">my upload window...</div>
		<div id="flickr"></div>
	</div>
</div>
<div id="footer"><?php include 'footer.php' ?></div>
</body>
</html>